<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>楚瑞涛的博客管理后台-类别管理</title>
  <link rel="stylesheet" href=<?php echo HOME_CSS.'layui.css' ?> media="all">
  <script type="text/javascript" src=<?php echo HOME_JS.'jquery.min.js' ?> ></script>
  <script src=<?php echo HOME_JS.'layui.js' ?> ></script>
  <style>
  .info-title{
    text-align: center;
    font-weight: bold;
    padding-bottom: 20px;
  }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">楚瑞涛博客管理后台</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src=<?php echo $_SESSION['m_portrait'] ?>  class="layui-nav-img" alt="头像">
          楚瑞涛
        </a>
        <dl class="layui-nav-child">
          <dd><a href=<?php echo HOME_PATH.'index.php/User/getManAll' ?>>基本资料</a></dd>
          <dd><a href=<?php echo HOME_PATH.'index.php/User/getManagerPass' ?>>修改密码</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a onclick="exit_login()" href="javascript:;">退出</a></li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item">
          <a class="" href="javascript:;">用户管理
            <span class="layui-nav-more"></span>
          </a>
          <dl class="layui-nav-child">
            <dd><a href=<?php echo HOME_PATH.'index.php/User/getUserAll' ?>>用户管理</a></dd>
            <!-- <dd><a href="javascript:;">权限申请管理</a></dd> -->
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">博客管理
            <span class="layui-nav-more"></span>
          </a>
          <dl class="layui-nav-child">
            <dd><a href=<?php echo HOME_PATH.'index.php/Blog/getBlogAll' ?>>博客管理</a></dd>
            <dd class="layui-this"><a href=<?php echo HOME_PATH.'index.php/Type/getTypeAll' ?> >类别管理</a></dd>
            <dd><a href=<?php echo HOME_PATH.'index.php/Target/getTargetAll' ?>>标签管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">评论管理</a>
            <dl class="layui-nav-child">
              <dd><a href=<?php echo HOME_PATH.'index.php/User/getManAll' ?> >个人信息</a></dd>
              <dd><a href=<?php echo HOME_PATH.'index.php/User/getManagerPass' ?> >修改密码</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">系统设置</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="layui-form layui-form-pane" style="display:none" id="setType">
    <h3 class="info-title">设置类别</h3>
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">类别名称：</label>
        <div class="layui-input-block">
          <input type="text" name="name" required  lay-verify="required" placeholder="请输入类别名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类别状态：</label>
        <div class="layui-input-block">
          <input type="checkbox" name="state" lay-skin="switch" lay-text="正常|禁用">
        </div>
      </div>
    </form>
  </div>
  <div class="layui-form layui-form-pane" style="display:none" id="addType">
    <h3 class="info-title">添加类别</h3>
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">类别名称：</label>
        <div class="layui-input-block">
          <input type="text" name="name" required  lay-verify="required" placeholder="请输入类别名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类别状态：</label>
        <div class="layui-input-block">
          <input type="checkbox" name="state" lay-skin="switch" lay-text="正常|禁用">
        </div>
      </div>
    </form>
  </div>
  <div class="layui-body">
    <div style="padding: 15px;">
      <form class="layui-form" action="">
          <div class="layui-form-item">搜索名称：
            <div class="layui-inline">
            <input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入类别名称" autocomplete="off" class="layui-input">
          </div>
          <button class="layui-btn layui-btn-normal" onclick="return false;" data-type="reload" id="search" >搜索</button>
          <button class="layui-btn" onclick="return false;" id="add_type">添加</button>
          <button class="layui-btn layui-btn-primary " onclick="return false;" id="refresh" data-type="reload" >刷新</button>
          </div>
        </form>
      <table class="layui-hide" id="type_info" lay-filter="type_info"></table>
    </div>
  </div>
  
<script>
 //退出登陆
 function exit_login(){
    layer.alert('确定要退出嘛？',{
      // skin: 'layui-layer-rim' //样式类名 /layui-layer-molv  layui-layer-lan   layui-layer-rim
      closeBtn: 1    // 是否显示关闭按钮
      ,anim: 1 //动画类型
      ,btn: ['退出','取消'] //按钮
      ,icon: 3    // icon\
      ,title:"退出"
      ,yes:function(){
        $.ajax({
          url:'/blog_system/admin/index.php/Login/exitLogin',
          type:'POST',
          contentType: "application/x-www-form-urlencoded;charset=utf-8",
          success:function(result){
            console.log(result);
            if(result == 1){
              layer.msg('退出登陆成功',{icon: 6, time: 2000});
              $(":root").delay(2000).queue(function(){ window.location.href="/blog_system/admin/index.php"; });   //阿里云搜索跳转
            }else{
              layer.msg('退出登陆失败，请刷新后重试',{icon:5, time: 2000});
            }
          }
        });
      }
    });
  }
  //使用 table 组件
  layui.use(['element','table',"layer",'form'], function(){
    var form = layui.form;
    var table = layui.table;
    var layer = layui.layer,$=layui.$;
    var element = layui.element;
    
    table.render({
      elem: '#type_info'
      ,url:'/blog_system/admin/index.php/Type/getTypesJson'
      ,title: '类别数据表'
      ,toolbar: 'default'    //日后完善
      ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'编号', type:'numbers', width:100}
          ,{field:'name', title:'类别名称', align: 'center'}
          ,{field:'state', title:'状态', align: 'center', width:120}
          ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#typeBar', width:150}
      ]]
      ,height: 'full-220'   //高度自适应
      ,width:800
      ,limit:15
      ,page: {
        layout: [ 'prev', 'page', 'next', 'count','skip'] //自定义分页布局
        ,curr: 1 
        ,first: '首页' //显示首页
      }
    });
    $("#refresh").on('click',function(){
      table.reload('type_info');
    });
    //点击搜索按钮根据用户名称查询
	  $('#search').on('click',function(){
      if($('#name') == ''){
        return;
      }
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    //根据条件查询表格数据重新加载
	  var $ = layui.$, active = {
		    reload: function(){
		      var name = $('#name');
		      table.reload('type_info', {   //执行重载
		        page: {
		          layout: [ 'prev', 'page', 'next', 'count','skip'] //自定义分页布局
              ,curr: 1 
              ,first: '首页' //显示首页
		        }
            ,where: {        //根据条件查询
		        	name:name.val()
		        }
		      });
		   }
		};
     //监听头工具栏事件
    table.on('toolbar(type_info)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
      ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          addType();
        break;
        case 'update':
          if(data.length === 0){
            layer.msg('请选择一行',{icon: 7, time: 2000});
          } else if(data.length > 1){
            layer.msg('只能同时编辑一个',{icon: 7, time: 2000});
          } else {
            layer.open({
              title: '设置'  
              ,btn: ['修改','取消'] //按钮
              ,anim: 1 //动画类型 
              ,content:$('#setType').html()
              ,success: function(layero, index){
                //请求文章类型
                layero.find('input[name="name"]').val(data[0].name);
                if(data[0].state=='正常')
                  layero.find('input[name="state"]').prop("checked",true);
                form.render();    //重新渲染 from 组件
              }
              ,yes:function(index,layero){
                var rex = /[\u4e00-\u9fa5_a-zA-Z0-9]{1,10}/;
                var name = layero.find('input[name="name"]').val();
                var state = layero.find('input[name="state"]').prop("checked")?1:0;

                if(name == ''){
                  alert("请输入类别名称");
                  return;
                }else if(!rex.test(name)){
                  alert("类别名称只能输入中文、英文、数字及下划线且长度不能超过10");
                  return;
                }
                tempState = state==1?'正常':'禁用';
                if(data[0].name == name && data[0].state == tempState){
                  layer.msg('修改失败，数据没有变化',{icon: 7, time: 2000});
                  return;
                }
                datainfo={
                  name:name,
                  state:state,
                  id:data[0].id
                }
                $.ajax({
                  url:'/blog_system/admin/index.php/Type/editType',
                  type:'POST',
                  data:datainfo,
                  contentType: "application/x-www-form-urlencoded;charset=utf-8",
                  success:function(result){
                    if(result){
                      var data = JSON.parse(result);
                      console.log(data);
                      if(data.code){
                        layer.msg('修改成功',{icon: 6, time: 2000});
                        // obj.update({      //更新表格数据               //无效
                        //   'name':name,
                        //   'state':state==1?'正常':'禁用'
                        // });
                        table.reload('type_info');
                      }else{
                        layer.msg('修改失败，数据没有变化',{icon: 7, time: 2000});
                      }
                      return ; 
                    }
                    layer.msg('修改失败，请检查有没有重复的类别名！',{icon: 5, time: 2000}); 
                  }
                });
              }
            });
          }
        break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行',{icon: 7, time: 2000});
          }else if(data.length > 1 ){
            layer.msg('一次最多删除1个',{icon: 7, time: 2000});
          } else {
            layer.alert('真的删除选中的数据吗？<br>删除后数据将不可恢复！！',{
              closeBtn: 1    // 是否显示关闭按钮
              ,anim: 6 //动画类型
              ,btn: ['确定','取消'] //按钮
              ,icon: 3    // icon
              ,title:"删除"
              ,yes:function(index){
                var data = checkStatus.data;
                dataInfo = {
                  id : data[0].id
                } 
                $.ajax({
                  url:'/blog_system/admin/index.php/Type/delType',
                  type:'POST',
                  contentType: "application/x-www-form-urlencoded;charset=utf-8",
                  data:dataInfo,
                  success:function(result){
                    if(result){
                      var data = JSON.parse(result);
                      console.log(data.code);
                      if(data.code == 1){
                        layer.msg('删除成功',{icon: 6, time: 2000});
                        $(".layui-laypage-btn")[0].click();       //刷新当前页面数据
                      }else if(data.code == 2){
                        layer.msg('删除失败，还有博客在使用此类别',{icon: 7, time: 2000});
                      }else{
                        layer.msg('删除失败',{icon: 5, time: 2000}); 
                      }
                      return ; 
                    }
                    layer.msg('删除失败',{icon: 5, time: 2000}); 
                  }
                });
              }
            });
          }
        break;
      }
    });
    //监听行工具事件
    table.on('tool(type_info)', function(obj){
      var typeInfo = obj.data;
      if(obj.event === 'set'){            //设置类别
        layer.open({
          title: '设置'  
          ,btn: ['修改','取消'] //按钮
          ,anim: 1 //动画类型 
          ,content:$('#setType').html()
          ,success: function(layero, index){
            //请求文章类型
            layero.find('input[name="name"]').val(typeInfo.name);
            if(typeInfo.state=='正常')
              layero.find('input[name="state"]').prop("checked",true);
            form.render();    //重新渲染 from 组件
          }
          ,yes:function(index,layero){
            var rex = /[\u4e00-\u9fa5_a-zA-Z0-9]{1,10}/;
            var name = layero.find('input[name="name"]').val();
            var state = layero.find('input[name="state"]').prop("checked")?1:0;

            if(name == ''){
              alert("请输入类别名称");
              return;
            }else if(!rex.test(name)){
              alert("类别名称只能输入中文、英文、数字及下划线且长度不能超过10");
              return;
            }
            tempState = state==1?'正常':'禁用';
            if(typeInfo.name == name && typeInfo.state == tempState){
              layer.msg('修改失败，数据没有变化',{icon: 7, time: 2000});
              return;
            }
            datainfo={
              name:name,
              state:state,
              id:typeInfo.id
            }
            $.ajax({
              url:'/blog_system/admin/index.php/Type/editType',
              type:'POST',
              data:datainfo,
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              success:function(result){
                if(result){
                  var data = JSON.parse(result);
                  console.log(data);
                  if(data.code==1){
                    layer.msg('修改成功',{icon: 6, time: 2000});
                    obj.update({      //更新表格数据
                      'name':name,
                      'state':state==1?'正常':'禁用'
                    });
                  }else if(data.code == 2){
                    layer.msg('修改失败失败，该类别名称已经存在！！',{icon: 7, time: 2000});
                  }else{
                    layer.msg('修改失败',{icon: 7, time: 2000});
                  }
                  return ; 
                }
                layer.msg('修改失败',{icon: 5, time: 2000}); 
              }
            });
          }
        });
      } else if(obj.event === 'ban'){
        layer.alert('确定要将这个类别禁用吗？',{
          closeBtn: 1    // 是否显示关闭按钮
          ,anim: 1 //动画类型
          ,btn: ['确定','取消'] //按钮
          ,icon: 3    // icon\
          ,title:"设为禁用"
          ,yes:function(index){
            if(typeInfo.state == '禁用'){
              layer.msg('该类别已经为禁用了',{icon: 7, time: 2000});
              return;
            }
            $.ajax({
              url:'/blog_system/admin/index.php/Type/setTypeBan/id/'+typeInfo.id,
              type:'POST',
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              success:function(result){
                if(result){
                  var data = JSON.parse(result);
                  console.log(data.code);
                  if(data.code == 1){
                    layer.msg('设置成功',{icon: 6, time: 2000});
                    obj.update({      //更新表格数据
                      'state':'禁用'
                    });
                  }else{
                    layer.msg('该类别已经为禁用了',{icon: 7, time: 2000});
                  }
                  return ; 
                }
                layer.msg('设置失败',{icon: 5, time: 2000}); 
              }
            });
          }
        });
      }
    });
    //添加类别按钮
    $("#add_type").click(function(){
      addType();
    })
    function addType(){
      layer.open({
          title: '添加类别'  
          ,btn: ['添加','取消'] //按钮
          ,anim: 1 //动画类型 
          ,content:$('#addType').html()
          ,success: function(layero, index){
            form.render();    //重新渲染 from 组件
          }
          ,yes:function(index,layero){
            var rex = /[\u4e00-\u9fa5_a-zA-Z0-9]{1,10}/;
            var name = layero.find('input[name="name"]').val();
            var state = layero.find('input[name="state"]').prop("checked")?1:0;
            if(name == ''){
              alert("请输入类别名称");
              return;
            }else if(!rex.test(name)){
              alert("类别名称只能输入中文、英文、数字及下划线且长度不能超过10");
              return;
            }
            datainfo={
              name:name,
              state:state,
            }
            $.ajax({
              url:'/blog_system/admin/index.php/Type/addType',
              type:'POST',
              data:datainfo,
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              success:function(result){
                if(result){
                  var data = JSON.parse(result);
                  if(data.code == '1'){
                    layer.msg('添加成功',{icon: 6, time: 2000});
                    $(".layui-laypage-btn")[0].click();       //刷新当前页面数据
                  }else if(data.code == 2){
                    layer.msg('添加失败，该类别名称已经存在！！',{icon: 7, time: 2000});
                  }else{
                    layer.msg('添加失败',{icon: 7, time: 2000});
                  }
                  return ; 
                }
                layer.msg('添加失败',{icon: 5, time: 2000}); 
              }
            });
          }
        });
      }
    });
</script>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    &copy; 河南科技学院-三月小组
  </div>
</div>
</body>
</html>

<!-- typeBar -->
<script type="text/html" id="typeBar">
  <a class="layui-btn layui-btn-xs" lay-event="set">设置</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="ban">禁用</a>
</script>

